<template>
	<view class="page-container">
		<u-image
		src="/static/bj.png"
		width="100%"
		height="100vh"
		mode="aspectFill"
		class="background-image"
		></u-image>
		<view class="questions">
				<view class="question">
					{{ content }}
				</view>
				<view class="question">
					{{ questionPrompt }}
				</view>
			</view>
		  
		  <view class="content">
		    <u-button type="primary" size="large" @click="hanldeBeginInterview">{{btnText}}</u-button>
		  </view>
		</view>
</template>

<script>
	import { getQuestions }from '@/api/interview/answer.js'
	export default {
	data() {
		return {
			questions: [],
			// 当前正在作答的题目
			index: 0,
			content: '请点击"开始面试"按钮开始答题',
			questionPrompt: '',
			btnText: '开始面试',
			recordManager: null,
			// 录音文件的地址
			recordFilePath: null,
			// 是否启用录音功能（用于检测录音设备是否可用）
			recordEnabled: true,
			// 是否正在录音中
			isRecording: false
		};
	},
		methods:{
			// 根据面试记录加载面试问题
			async loadQuestions(){
				let recordId = uni.getStorageSync("interviewRecord");
				console.log('recordId',recordId)
				// 发送请求到后端
				const res = await getQuestions(recordId)
				console.log('res',res)
				this.questions = res.data
			},
	// 开始面试
	hanldeBeginInterview(){
		console.log('点击按钮，当前index:', this.index, '录音启用:', this.recordEnabled, '正在录音:', this.isRecording)
		
		// 如果禁用了录音功能，直接进入下一题
		if(!this.recordEnabled) {
			this.handleNextQuestionWithoutRecord()
			return
		}
		
		// =================录音的逻辑=================
		// 第一次点击
		if(this.index == 0){
			// 显示第一题
			this.showQuestion(this.index);
			this.btnText = '下一题'
			this.index++; // 先自增，准备下一题
			
			// 尝试开启录音
			try {
				this.recordManager.start({
					format: 'mp3',
					duration: 300000
				})
				this.isRecording = true
				console.log('尝试开始录音')
			} catch (e) {
				console.error('启动录音失败:', e)
				this.recordEnabled = false
				this.isRecording = false
				uni.showToast({
					title: '录音设备不可用，已切换到无录音模式',
					icon: 'none',
					duration: 2000
				})
			}
		}else{
			// 结束上一次的录音
			console.log('尝试停止录音')
			if(this.isRecording) {
				try {
					this.recordManager.stop()
				} catch (e) {
					console.error('停止录音失败:', e)
					this.recordEnabled = false
					this.isRecording = false
					// 如果停止录音失败，直接进入下一题
					this.handleNextQuestionWithoutRecord()
				}
			} else {
				// 如果没有在录音，直接进入下一题
				console.log('没有录音，直接进入下一题')
				this.handleNextQuestionWithoutRecord()
			}
		}
		
	},
			showQuestion(index){
				if(index < this.questions.length){
					this.content = this.questions[index].content;
					console.log('this.content',this.content)
					this.questionPrompt = this.questions[index].questionPrompt;
				}
			},
	// 上传录音
	uploadRecord(){
		uni.uploadFile({
			url: 'http://localhost:8080/interview/answer/handleAnswer',
			filePath: this.recordFilePath.file,
			name: 'file',
			formData: {
				questionId: this.recordFilePath.questionId
			},
			success: (res) => {
				console.log('上传录音成功', res)
			},
			fail: (err) => {
				console.error('上传录音失败', err)
			}
		})
	},
	// 提交答案（无录音文件的情况）
	submitAnswerWithoutRecord(questionId){
		console.log('提交无录音答案，questionId:', questionId)
		const recordId = uni.getStorageSync("interviewRecord");
		uni.request({
			url: 'http://localhost:8080/interview/answer/handleAnswerNoFile/' + questionId,
			method: 'POST',
			success: (res) => {
				console.log('提交答案成功', res)
			},
			fail: (err) => {
				console.error('提交答案失败', err)
				uni.showToast({
					title: '提交答案失败',
					icon: 'none',
					duration: 1500
				})
			}
		})
	},
	// 跳过录音继续下一题（用于没有录音设备的情况）
	handleNextQuestionWithoutRecord(){
		console.log('跳过录音，直接显示下一题，当前index:', this.index, '题目总数:', this.questions.length)
		
		// 提交当前题的答案（如果有题目的话）
		// 注意：index 指向的是"下一题"，所以要提交 index-1 的答案
		// 但是第一次进入这个方法时，如果 index=1，说明已经显示了第一题（index=0），需要提交第一题
		if(this.index > 0 && this.index <= this.questions.length){
			const currentQuestionId = this.questions[this.index - 1].id
			console.log('提交当前题的答案，题号:', this.index - 1, 'questionId:', currentQuestionId)
			this.submitAnswerWithoutRecord(currentQuestionId)
		}
		
		// 如果是最后一题，直接生成报告
		if(this.index >= this.questions.length){
			console.log('已经是最后一题，生成报告')
			// 延迟一下，确保最后一题的答案提交完成
			setTimeout(() => {
				// 调用结束面试并生成报告
				const recodeId = uni.getStorageSync('interviewRecord');
				uni.showLoading({title:'生成报告中...'});
				import('@/api/interview/record.js').then(mod => {
					mod.finishInterview(recodeId).then(res =>{
						uni.hideLoading();
						const reportStr = typeof res.msg === 'string' ? res.msg : JSON.stringify(res.msg);
						uni.setStorageSync('lastInterviewReport', reportStr);
						uni.navigateTo({
							url: '/pages/report/detail?report=' + encodeURIComponent(reportStr)
						})
					}).catch(()=>{
						uni.hideLoading();
						uni.showToast({title:'生成报告失败', icon:'none'});
					})
				})
			}, 500)
			return
		}
		
		//展示当前题目
		this.showQuestion(this.index);
		
		//控制按钮显示的内容（注意：index 还没自增）
		if(this.index < this.questions.length - 1){
			this.btnText = '下一题'
		}else{
			this.btnText = '结束面试'
		}
		
		// 自增 index，准备下一题
		this.index++;
		console.log('显示题目后，index 增加为:', this.index)
	}
	},
	onLoad() {
		this.loadQuestions()
		this.recordManager = uni.getRecorderManager();
		
		// 监听录音开始事件
		this.recordManager.onStart(() => {
			console.log('录音已成功开始')
			this.isRecording = true
		})
		
		// 监听录音错误事件
		this.recordManager.onError((err) => {
			console.error('录音错误:', err)
			this.isRecording = false
			this.recordEnabled = false
			uni.showModal({
				title: '录音失败',
				content: '检测到录音设备异常，将自动跳过录音继续答题',
				showCancel: false,
				success: () => {
					// 自动进入下一题
					this.handleNextQuestionWithoutRecord()
				}
			})
		})
		
		//录音结束的时候
		this.recordManager.onStop((res) =>{
			this.isRecording = false
			console.log('录音已停止')
				//保存录音文件
				this.recordFilePath = {
					file:res.tempFilePath,
					questionId: this.questions[this.index-1].id//结束上一次录音，所以是index-1
				}
				//上传录音文件
				this.uploadRecord()
				//控制按钮显示的内容
				if(this.index > 0 && this.index < this.questions.length-1){
					//显示下一题
					this.btnText = '下一题'
				}else{
					this.btnText = '结束面试'
				}
				//展示当前题目
				this.showQuestion(this.index++);
				//最后一次点击
				if(this.index > this.questions.length){
					// 调用结束面试并生成报告
					const recodeId = uni.getStorageSync('interviewRecord');
					uni.showLoading({title:'生成报告中...'});
					import('@/api/interview/record.js').then(mod => {
						mod.finishInterview(recodeId).then(res =>{
							uni.hideLoading();
							const reportStr = typeof res.data === 'string' ? res.data : JSON.stringify(res.data);
							uni.setStorageSync('lastInterviewReport', reportStr);
							uni.navigateTo({
								url: '/pages/report/detail?report=' + encodeURIComponent(reportStr)
							})
						}).catch(()=>{
							uni.hideLoading();
							uni.showToast({title:'生成报告失败', icon:'none'});
						})
					})
				}else{
					//开启下一次录音
					this.recordManager.start({
						format: 'mp3',
						duration: 300000,
					})
				}
			})
		}
	}
</script>

<style lang="scss" scoped>
.page-container {
  position: relative;
  width: 100%;
  height: 100vh;
}

.background-image {
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
}

.content {
  position: fixed;
  bottom: 150rpx;
  left: 125rpx;
  z-index: 1;
  width: 500rpx;
}
.questions {
  position: fixed;
  z-index: 1;
  bottom: 400rpx; /* 增加与按钮的距离 */
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  max-width: 600rpx;
  background-color: rgba(255, 255, 255, 0.85);
  border-radius: 20rpx;
  padding: 30rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
}
 
.question {
  font-size: 32rpx;
  line-height: 1.6;
  color: #333;
  margin-bottom: 20rpx;
  text-align: center;
  
  &:first-child {
    font-weight: bold;
    font-size: 36rpx;
    margin-bottom: 15rpx;
  }
}
</style>
